<template>
  <div class="user-operation">
    <el-collapse class="search-block" style="width: 1260px">
      <el-collapse-item title="条件搜索">
        <el-form
          ref="searchUserForm"
          :model="searchUserForm"
          label-position="top"
        >
          <el-form-item class="search-item" label="客户编号" prop="userId">
            <el-input
              type="text"
              v-model="searchUserForm.userId"
              style="width: 200px"
              placeholder="请输入客户编号"
            />
          </el-form-item>
          <el-form-item class="search-item" label="客户姓名" prop="username">
            <el-input
              type="text"
              v-model="searchUserForm.username"
              style="width: 200px"
              placeholder="请输入客户姓名"
              maxlength="10"
            />
          </el-form-item>
          <el-form-item class="search-item" label="身份证号码" prop="userCard">
            <el-input
              type="text"
              v-model="searchUserForm.userCard"
              style="width: 200px"
              placeholder="请输入身份证号码"
              maxlength="18"
            />
          </el-form-item>
          <el-form-item class="search-item" label="年龄" prop="age">
            <el-input
              type="text"
              v-model="searchUserForm.age"
              style="width: 120px"
              placeholder="请输入年龄"
              maxlength="3"
            />
          </el-form-item>
          <el-form-item class="search-item" label="性别" prop="gender">
            <el-select
              v-model="searchUserForm.gender"
              placeholder="请选择性别"
              style="width: 150px"
            >
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="search-item" label="登录ip" prop="loginIp">
            <el-input
              type="text"
              v-model="searchUserForm.loginIp"
              style="width: 200px"
              placeholder="请输入登录ip"
              maxlength="18"
            />
          </el-form-item>
          <el-form-item label="登录时间" class="search-item" prop="loginTime">
            <div class="block">
              <el-date-picker
                v-model="searchUserForm.loginTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="注册时间" class="search-item" prop="createTime">
            <div class="block">
              <el-date-picker
                v-model="searchUserForm.createTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="修改时间" class="search-item" prop="updateTime">
            <div class="block">
              <el-date-picker
                v-model="searchUserForm.updateTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <div class="search-button">
            <el-button
              type="warning"
              icon="el-icon-search"
              @click="getUserTableList()"
              >搜 索</el-button
            >
            <el-button
              icon="el-icon-delete"
              @click="resetSearchBlock('searchUserForm')"
              >重 置</el-button
            >
          </div>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <div class="user-table">
      <el-table :data="userTableList" stripe v-loading="userTableLoading">
        <el-table-column
          prop="user_id"
          label="客户编号"
          align="center"
          width="100px"
        />
        <el-table-column
          prop="user_name"
          label="客户姓名"
          align="center"
          width="100px"
        />
        <el-table-column
          prop="user_card"
          label="身份证号码"
          align="center"
          width="150px"
        />
        <el-table-column prop="age" label="年龄" align="center" width="50px" />
        <el-table-column prop="sex" label="性别" align="center" width="50px">
          <template slot-scope="scope">
            <span v-if="scope.row.sex === '0'">男</span>
            <span v-else-if="scope.row.sex === '1'">女</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="login_ip"
          label="登录ip"
          align="center"
          width="100px"
        />
        <el-table-column
          prop="login_time"
          label="登录时间"
          align="center"
          width="170px"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.login_time | dateFormat("yyyy-mm-dd hh:mm:ss")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="注册时间"
          align="center"
          width="170px"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.create_time | dateFormat("yyyy-mm-dd hh:mm:ss")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="修改时间"
          align="center"
          width="170px"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.update_time | dateFormat("yyyy-mm-dd hh:mm:ss")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteUser(scope.row.user_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getUserTableList"
      />
    </div>
  </div>
</template>

<script>
import { getUserList, deleteUser } from "@/api/user";
import { mapState } from "vuex";
export default {
  name: "UserOperation",

  data() {
    return {
      userTableList: [],
      userTableLoading: false,
      searchUserForm: {
        userId: "",
        username: "",
        userCard: "",
        age: "",
        gender: "",
        loginIp: "",
        loginTime: "",
        createTime: "",
        updateTime: "",
      },
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        userId: "",
        username: "",
        userCard: "",
        age: "",
        gender: "",
        loginIp: "",
        firstLoginTime: "",
        secLoginTime: "",
        firstCreateTime: "",
        secCreateTime: "",
        firstUpdateTime: "",
        secUpdateTime: "",
      },
      total: 0,
    };
  },

  created() {
    this.getUserTableList();
  },

  computed: {
    ...mapState({
      uid: (state) => state.login.userId,
    }),
  },

  methods: {
    getUserTableList() {
      this.packQuery();
      this.userTableLoading = true;
      getUserList(this.queryParams)
        .then((res) => {
          this.userTableList = res.rows;
          this.total = res.total;
          this.userTableLoading = false;
        })
        .catch((err) => {
          this.userTableLoading = false;
        });
    },
    deleteUser(userId) {
      console.log(this.uid);
      console.log(userId);
      this.$confirm("确定要删除该用户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (userId === this.uid) {
            this.$message.error("您不能删除自己");
            return;
          }
          deleteUser(userId).then((res) => {
            this.$message.success("删除成功!");
            this.getUserTableList();
          });
        })
        .catch(() => {});
    },
    resetSearchBlock(formName) {
      this.$refs[formName].resetFields();
    },
    packQuery() {
      let paramsForm = this.searchUserForm;
      if (paramsForm.userId != null && paramsForm.userId != "") {
        if (isNaN(paramsForm.userId)) {
          this.$message.error("客户编号是数字");
          return;
        }
      }
      if (paramsForm.age != null && paramsForm.age != "") {
        if (isNaN(paramsForm.age)) {
          this.$message.error("年龄是数字");
          return;
        }
      }
      this.queryParams.userId = paramsForm.userId;
      this.queryParams.username = paramsForm.username;
      this.queryParams.userCard = paramsForm.userCard;
      this.queryParams.age = paramsForm.age;
      this.queryParams.gender = paramsForm.gender;
      this.queryParams.loginIp = paramsForm.loginIp;
      this.queryParams.firstLoginTime =
        paramsForm.loginTime === null ? null : paramsForm.loginTime[0];
      this.queryParams.secLoginTime =
        paramsForm.loginTime === null ? null : paramsForm.loginTime[1];
      this.queryParams.firstCreateTime =
        paramsForm.createTime === null ? null : paramsForm.createTime[0];
      this.queryParams.secCreateTime =
        paramsForm.createTime === null ? null : paramsForm.createTime[1];
      this.queryParams.firstUpdateTime =
        paramsForm.updateTime === null ? null : paramsForm.updateTime[0];
      this.queryParams.secUpdateTime =
        paramsForm.updateTime === null ? null : paramsForm.updateTime[1];
    },
  },

  filters: {
    dateFormat: function (val, args) {
      var time = new Date(val);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var day = time.getDate();

      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;

      if (args.toLowerCase() === "yyyy-mm-dd") {
        return year + "年" + month + "月" + day + "日";
      } else {
        var hour = time.getHours();
        var min = time.getMinutes();
        var sec = time.getSeconds();

        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;

        return (
          year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec
        );
      }
    },
  },
};
</script>

<style>
.search-block {
  margin-bottom: 20px;
}

.el-collapse-item__header {
  color: #4091ff !important;
  font-size: 15px;
}

.search-item {
  display: inline-block;
  margin-left: 20px;
}

.el-form-item__label {
  padding-bottom: 0px !important;
}

.search-button {
  float: right;
  margin-bottom: 20px;
}
</style>